<template>
	<view class="container">
		<view class="bodyConetnt">
			<!-- ======================================收货地址====================================== -->
			<view class="address" @click="open_address_list">
				<view class="address_left">
					<image src="https://community.chuangxiangdianli.com/images/me/add_add.png" mode=""></image>
				</view>
				<view class="address_center" v-if="addressData.length>0">
					<view class="name">
						收货人<text>{{addressData[addressIndex].receive_name}}</text>
						<text>{{addressData[addressIndex].receive_tel}}</text></view>
					<view class="center_content">
						{{addressData[addressIndex].area_info}}{{addressData[addressIndex].address}}
					</view>
					
				</view>
				<view class="address" @click.stop="add_address" style="padding-top: 0;border: none;" v-else>
					点击新增地址
				</view>
				<view class="address_right">
					<image src="https://community.chuangxiangdianli.com/images/goodsDetail/hsang_arrow.png" mode=""></image>
				</view>
			</view>
			<!-- ======================================收货地址====================================== -->
			<view class="goods">
				<view class="item">
					<image class="goodsImage" 
						:src="detail.goods_images[0]" mode=""></image>
					<view class="goodsMsg">
						<view class="goodsName">{{detail.goods_name}}</view>
						<view>￥{{detail.goods_price}}</view>
					</view>
				</view>
			</view>
			<!-- ======================================交易方式====================================== -->
			<view class="payWay" @click="changePayWay">
				<text>交易方式</text>
				<text>{{pay_methods==1?'自提':'面交'}}</text>
			</view>
		</view>
		<!-- ======================================底部bar====================================== -->
		<view class="bottomBar">
			<view class="price">
				<text>合计</text>
				<text>￥{{detail.goods_price}}</text>
			</view>
			<view class="goPay" @click="pay">
				去支付
			</view>
		</view>
		<!-- ======================================交易方式弹出框====================================== -->
		<view class="payWayPop" v-if="payWayFlag" @click="closePayWay()">
			<view class="content">
				<template v-for="item in items">
					<view :key="item.value"
						class="pay_method"
						:class="pay_methods==item.value?'active':''"
						@click="radioChange(item.value)">
						{{item.name}}
					</view>
				</template>
			</view>
		</view>
		<!-- 地址列表 -->
		<u-popup v-model="addressFlag" mode='bottom' :closeable="true" border-radius="20">
			<view class="addTitle">
				收货地址
				<view class="new" @click="add_address">新增</view>
			</view>
			<scroll-view scroll-y="true" style="max-height: 700rpx;min-height:300rpx;padding: 0 30rpx;box-sizing: border-box;">
				<view class="to_address_item" v-if="JSON.stringify(addressData) != '[]'" v-for="(item, index) in addressData" @click="changeAddress(index)">
					<view class="check_box">
						<img src="https://community.chuangxiangdianli.com/images/shopCar/choose_n.png" v-if="index != addressIndex" alt="">
						<img src="https://community.chuangxiangdianli.com/images/shopCar/choose_s.png" v-if="index == addressIndex" alt="">
					</view>
					<view class="txt_box over2">{{item.area_info+item.address}}</view>
				</view>
				<view class="addTitle" v-if="JSON.stringify(addressData) == '[]'">暂无收货地址</view>
			</scroll-view>
			<view class="button_box" @click="confirm_address">确认</view>
		</u-popup>
	</view>
</template>

<script>
	// 引入封装的请求
	import request from '@/utils/request.js'
	export default{
		data() {
			return{
				// 商品的id
				id:null,
				// 商品详情
				detail:{},
				// 地址列表 
				addressData:[],
				payWayFlag: false, // 交易方式弹出框
				// 支付方式 
				pay_methods:1,
				items:[
					{
						value: 1,
						name: '自提',
						checked: 'true'
					},
					{
						value: 2,
						name: '面交'
					},
				],
				// 选择地址的弹框
				addressFlag:false,
				// 地址索引
				addressIndex:0
			}
		},
		onLoad(options) {
			console.log(options)
			this.id = options.id
			this.get_info()
			this.get_user_address()
		},
		methods: {
			// 支付
			pay(){
				let that = this
				let data = {
					goods_id:this.id,
					num:1,
					deal_type:that.pay_methods,
					address_id:this.addressData.length>0?this.addressData[this.addressIndex].id:null
				}
				if(!data.address_id){
					uni.showToast({
						title:'请选择收货地址'
					})
					return false
				}
				request.post({
					url:'Mini/circle/flea/order',
					data
				}).then(res=>{
					if(res.code==200){
						let order_sn = res.data.order_sn
						// console.log(order_sn)
						// 再次调用支付的接口
						// 获取支付参数
						request.get('Mini/circle/flea/getPayConfig',{
							order_sn
						}).then(res=>{
							if(res.code==200){
								let paydata = res.data
								uni.requestPayment({
								    provider: 'wxpay',
								    timeStamp: paydata.timeStamp,
								    nonceStr: paydata.nonceStr,
								    package: paydata.package,
								    signType: paydata.signType,
								    paySign: paydata.paySign,
								    success: function (res) { 
										uni.showToast({
											title:"支付成功",
											icon:'none'
										});
										
										uni.redirectTo({
											url:'/neighbor/market/mine/buy/index'
										})
								    },
								    fail: function (err) {
								        console.log('fail:' + JSON.stringify(err));
								    }
								});
							}
						})
					}
				})
			},
			// 点击新增地址 
			add_address(){
				uni.navigateTo({
					url: '/me/address/addAddress'
				})
			},
			// 确认选择的地址 
			confirm_address(){
				this.addressFlag = false
			},
			// 打开地址列表
			open_address_list(){
				this.addressFlag = true
			},
			//  打开交易方式弹出框
			changePayWay() {
				this.payWayFlag = true
			},
			// 关闭交易方式弹出框
			closePayWay() {
				this.payWayFlag = false
			},
			radioChange(i) {
				this.pay_methods = i;
				console.log(this.pay_methods)
			},
			// 获取商品详情
			get_info(){
				let that = this
				request.get('wechat/flea_goods/'+that.id,{
					id:that.id
				}).then(res=>{
					console.log(res)
					if(res.code==200){
						that.detail = res.data
						console.log(that.detail)
					}
				})
			},
			// 获取用户的地址 
			get_user_address(){
				let that = this
				request.post({
					url:'Mini/address/getAddress'
				}).then(res=>{
					console.log(res)
					if(res.status){
						that.addressData = res.data
					}
				})
			},
			// 切换收货地址
			changeAddress(index) {
				if (index == this.addressIndex) return
				this.addressIndex = index
				this.addressFlag = false
			},
		},
		
	}
</script>

<style lang="scss" scoped>
	.container{
		position: relative;
	}
	.bodyConetnt{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		min-height: 100%;
		padding-bottom: 95rpx;
		box-sizing: border-box;
		background-color: rgba(247, 246, 249, 1);
		.address{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			width: 100%;
			padding: 43rpx 23rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-top: 1rpx solid rgba(203, 203, 203, 0.65);
			margin-bottom: 11rpx;
			.address_left{
				width: 43rpx;
				height: 53rpx;
				&>image{
					display: block;
					height: 100%;
					width: 100%;
				}
			}
			.address_center{
				flex: 1;
				margin: 0 47rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				.name{
					margin-bottom: 30rpx;
					&>text{
						margin-left: 40rpx;
					}
				}
			}
			.address_right{
				height: 26rpx;
				width: 26rpx;
				margin: auto;
				&>image{
					display: block;
					width: 100%;
					height: 100%;
				}
			}
		}
		.goods{
			width: 100%;
			padding: 35rpx 25rpx;
			box-sizing: border-box;
			background-color: #fff;
			margin-bottom: 2rpx;
			.item{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				width: 100%;
				height: 170rpx;
				margin: 20rpx 0;
				.goodsImage{
					display: block;
					height: 170rpx;
					width: 170rpx;
					border-radius: 10rpx;
				}
				.goodsMsg{
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 36rpx;
					font-size: 30rpx;
					font-family: Hiragino Sans GB;
					font-weight: normal;
					color: #333333;
				}
			}
		}
		.payWay{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			height: 112rpx;
			width: 100%;
			padding: 0 26rpx;
			background-color: #fff;
			box-sizing: border-box;
			font-size: 30rpx;
			font-family: Hiragino Sans GB;
			font-weight: normal;
			color: #000000;
			line-height: 112rpx;
			&>view{
				display: flex;
				align-items: center;
			}
		}
	}
	.bottomBar{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 90;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding-left: 30rpx;
		box-sizing: border-box;
		height: 95rpx;
		width: 100%;
		background-color: #fff;
		.price{
			flex: 1;
			font-size: 30rpx;
			font-family: Hiragino Sans GB;
			font-weight: bold;
			color: #B83D42;
			&>text:nth-child(1){
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
			}
		}
		.goPay{
			width: 256rpx;
			height: 95rpx;
			background: linear-gradient(3deg, #FC9E00 0%, #FBB10D 76%);
			text-align: center;
			line-height: 95rpx;
			font-size: 36rpx;
			font-family: Hiragino Sans GB;
			font-weight: normal;
			color: #FEFEFE;
		}
	}
	.payWayPop{
		position: fixed;
		left: 0;
		top: 0;
		background-color: rgba(0,0,0,.6);
		z-index: 110;
		width: 100vw;
		height: 100vh;
		.content{
			position: absolute;
			left: 0;
			bottom: 0;
			background-color: #fff;
			width: 100%;
			// height: 200rpx;
			border-radius: 10rpx 10rpx 0 0;
			.pay_method{
				width: 100%;
				box-sizing: border-box;
				padding:20rpx 40rpx;
				border-bottom: 2rpx solid #eee;
				&.active{
					background-color: #F3F5F8;
				}
				&:nth-child(2){
					border: none;
				}
			}
		}
	}
	.addTitle{
		position: relative;
		font-size: 36rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 50rpx;
		text-align: center;
		margin: 20rpx 0;
		.new{
			position: absolute;
			left: 30rpx;
			top: 0;
			bottom: 0;
			margin: auto;
		}
	}
	.to_address_item {
		margin-bottom: 50rpx;
		width: 100%;
		height: 66rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.check_box {
			flex-shrink: 0;
			width: 32rpx;
			height: 32rpx;
			position: relative;
			margin-right: 26rpx;
		
			img {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}
		}
		
		.txt_box {
			font-size: 26rpx;
			font-weight: blod;
		}
	}
	.button_box {
		height: 90rpx;
		background: linear-gradient(-74deg, #70DAC4, #3EC4A7);
		// background: #2B95FF;
		border-radius: 45rpx;
		width: calc(100vw - 60rpx);
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		line-height: 90rpx;
		color: white;
		margin: 0 auto 70rpx;
		// margin-bottom: 70rpx;
	}
</style>
